<template>
  <!--业务员首页课程-->
  <div class="curriculum">
    <div class="curr_back">
      <div class="btn">
        <div class="curr_rush">
          <img src="../../../static/image/logo.png" />
        </div>
        <span>税东家(国际)税务商学院</span>
      </div>
      <img src="../../../static/image/currentduan.png" />
      <!-- <span class="goout" @click="goout()">退出登录</span> -->
    </div>
    <div style="height: auto; margin-bottom: 0.1rem;">
      <div class="Valueaddedtax_box" v-for="(item, index) in list" :key="index">
        <div class="Valueaddedtax_txt">
          <span style="margin-left: 0.3rem; font-size: 0.3rem;">
            {{ item.name }}
          </span>
          <span
            style="margin-right: 0.3rem; font-size: 0.24rem; color: #333333;"
            @click="more(item)"
            >查看更多</span
          >
        </div>
        <div class="Valueaddedtax">
          <div
            class="Valueaddedtax_txt1"
            @click="valueTxt(two)"
            v-for="(two, index) in item.columns"
            :key="index"
          >
            <div class="Valueaddedtax_img">
              <img :src="two.imgUrl" />
            </div>
            <div class="Valueaddedtax_cend">
              <div>{{ two.name }}</div>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  margin-top: 0.5rem;
                "
              >
                <span style="color: #ccc; font-size: 0.25rem;"
                  >{{ two.buyNum }}人开通</span
                >
                <div class="subscr" v-if="two.isBuy == 1">
                  <img src="../../../static/image/subscription.png" />
                  已订阅
                </div>
                <div class="subscr" v-if="two.isBuy == 0">
                  <img src="../../../static/image/lock.png" />
                  未订阅
                </div>
                <span style="font-size: 0.25rem; color: #f82e18;" wx:else
                  >￥{{ two.price }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <Footers></Footers>
    </footer>
  </div>
</template>
<script>
import Footers from "./footer";
import { columnResult } from "../../api/api";
import querystring from "query-string";
import { Indicator, Toast } from "mint-ui";

export default {
  name: "Homepage",
  components: {
    Footers,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    //专栏列表
    columnResult() {
      Indicator.open("加载中...");
      var params = {};
      var params = querystring.stringify(params);
      var a = localStorage.getItem("token");
      a = JSON.parse(a);
      columnResult(params, a).then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          this.list = res.data.data;
          Indicator.close();
        } else {
          Indicator.close();
          Toast(res.data.message);
        }
      });
    },
    goout() {
      localStorage.clear();
      this.$router.push({ path: "/" });
    },
    //跳转更多专栏
    more(item) {
      this.$router.push({
        path: "/Salesman/more",
        query: { id: item.id, name: item.name },
      });
    },
    //专栏详情
    valueTxt(item) {
      this.$router.push({
        path: "/Salesman/catalog",
        query: { columnId: item.columnId },
      });
    },
  },
  mounted() {
    this.columnResult();
  },
};
</script>
<style lang="scss" scoped>
.curriculum {
  width: 100%;
  height: auto;
  padding-bottom: 1.5rem;
}
.curr_back {
  width: 100%;
  height: 2.06rem;
  position: relative;
}
.curr_back img {
  width: 100%;
  height: 100%;
}
.btn {
  position: absolute;
  top: 0.8rem;
  left: 0.3rem;
  width: 7rem;
  height: 0.96rem;
  border-radius: 0.2rem;
  display: flex;
  /* justify-content: space-between; */
  line-height: 0.96rem;
  font-size: 0.3rem;
  box-sizing: border-box;
  padding: 0 0.2rem 0 0.2rem;
}
.curr_rush {
  margin-top: 0.05rem;
}
.btn span {
  font-size: 0.4rem;
  color: #fff;
  margin-left: 0.22rem;
}
.curr_rush img {
  width: 0.84rem;
  height: 0.84rem;
}
.Valueaddedtax {
  width: 7rem;
  height: auto;
  margin: auto;
}
.Valueaddedtax_txt {
  display: flex;
  justify-content: space-between;
  height: 0.78rem;
  line-height: 0.78rem;
  border: 0.02rem solid #eeeeee;
}
.Valueaddedtax_txt:nth-of-type(1) {
  border-bottom: 0.02rem solid #eeeeee;
}
.Valueaddedtax_txt1 {
  display: flex;
  justify-content: space-between;
  height: 2.21rem;
  border-bottom: 0.02rem solid #eeeeee;
}
.Valueaddedtax_txt1:nth-last-child(1) {
  border: none;
}
.Valueaddedtax_img {
  width: 2.1rem;
  height: 1.6rem;
  margin: auto;
  margin-left: 0.2rem;
}
.Valueaddedtax_img img {
  width: 100%;
  height: 100%;
}
.Valueaddedtax_cend {
  width: 4.45rem;
  font-size: 0.3rem;
  padding: 0.26rem;
}
.subscr {
  height: 0.35rem;
  display: flex;
  align-items: center;
  font-size: 0.26rem;
  color: #333333;
}
.subscr img {
  width: 0.25rem;
  height: 0.35rem;
  margin-right: 0.1rem;
}

.back {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.back_tu {
  width: 6rem;
  height: 9.6rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.back .bc {
  width: 5.48rem;
  height: 6.91rem;
  display: block;
}
.back_bottom {
  width: 5.97rem;
  height: 2rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0px 0px 0.32rem 0.32rem;
}
.back_title {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  margin-top: 0.39rem;
}
.back_title img:nth-child(1) {
  width: 0.58rem;
  height: 0.58rem;
}
.back_title img:nth-child(2) {
  width: 1.95rem;
  height: 0.31rem;
  margin-left: 0.11rem;
}
.back_bottom span {
  font-size: 0.24rem;
  font-family: Microsoft YaHei;
  color: #131010;
  margin-top: 0.23rem;
  font-weight: 400;
}
.back_bottom .liji {
  margin-top: 0.31rem;
  width: 5rem;
  height: 0.82rem;
  border: 0.02rem solid #f4d824;
  border-radius: 0.4rem;
  text-align: center;
  line-height: 0.82rem;
  font-size: 0.3rem;
  color: #f4d824;
  position: relative;
}
</style>